<template>
	<view class="wrap">
		<view class="title">评论:</view>
		<template v-if="commentList.length > 0">
			<view class="commentList" v-for="item of commentList" :key="item._id">
				<view class="userInfo">
					<view class="pic">
						<u-avatar :src="item.cuid.pic" size="40"></u-avatar>
					</view>
					<text class="nickname">{{item.cuid.nickname}}</text>
					<view class="vip">
						<u-tag 
							type="error" 
							size="mini" 
							:text="'VIP'+item.cuid.isVip" 
							:show="item.cuid.isVip !== '0'">
						</u-tag>
					</view>
					<text class="created">{{item.created|date}}</text>
				</view>
				<view class="content">
					<mp-html :content="item.content"></mp-html>
				</view>
				<view class="replyList" v-for="reply of replyList" :key="reply._id">
					<view class="replyItem" v-if="reply.cid._id===item._id">
						<text class="nickname">{{reply.ruid.nickname}} 回复：</text>
						<view class="replyContent" v-html="reply.content"></view>
						<view class="created">{{reply.created|date}}</view>
					</view>
				</view>
				<view class="other">
					<text class="iconfont icon-zan" :class="{'handed':item.handed === '1'}" @click="clickHands(item)">{{item.hands}}</text>
					<text class="iconfont icon-chakantiezihuifu">{{item.isAnswer}}</text>
					<text class="reply" @click="clickReply(item._id)">点击回复</text>
				</view>
			</view>
		</template>
		<u-empty
			v-else
			text="动动手指,抢占一楼的沙发!" 
			icon="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8da6cc70-751c-428d-9aa0-6516abc1603f/f167b3a0-792b-4ebd-befd-808f7ff2ea59.png">
		</u-empty>
		<view class="submitWrap">
			<view class="editor" v-if="editorStatus">
				<Editor></Editor>
				<view class="btn">
					<text class="cancel" @click="cancel">取消</text>
					<text class="submit" @click="submit">发表</text>
				</view>
			</view>
			<view class="clickWrap" v-else>
				<text class="click" @click="clickComment">
					谈谈您的看法吧!
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkToken} from '@/common/checkAuth'
	export default {
		props:{
			commentList:{
				type:Array,
				default(){
					return []
				}
			},
			replyList:{
				type:Array,
				default(){
					return []
				}
			},
			tid:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				editorStatus:false,
				type:'',
				cid:'',
				content:''
			}
		},
		mounted(){
			uni.$on('giveContent',this.getContent)
		},
		beforeDestroy(){
			uni.$off('giveContent',this.getContent)
		},
		methods:{
			getContent(val){
				this.content = val
			},
			clickComment(){
				if(checkToken()){
					this.type='comment'
					this.content = ''
					this.editorStatus = true
				}
			},
			clickReply(cid){
				if(checkToken()){
					this.cid = cid
					this.type = 'reply'
					this.content = ''
					this.editorStatus = true
				}
			},
			cancel(){
				this.type = ''
				this.content = ''
				this.editorStatus = false
			},
			async clickHands(item){
				if(checkToken()){
					const {code} = await this.$axios.api.setHands({ cid:item._id })
					if(code === 200){
						uni.showToast({
							title:'已成功点赞',
							icon:'success',
							duration:2000
						})
						item.handed = '1'
						item.hands += 1
					}else{
						uni.showToast({
						  title: '已点过赞,请勿重复点赞!',
						  icon: 'none',
						  duration: 2000
						})
					}
				}
			},
			async submit () {
				if (this.content.trim() === '' || this.content.trim() === '<p> </p>') {
					uni.showToast({
					  title: '评论不能为空!',
					  icon: 'error',
					  duration: 2000
					})
					return
				}
				if (this.type === 'comment') {
					const { code } = await this.$axios.api.addComment({
					  tid: this.tid,
					  content: this.content
					})
					if (code === 200) {
					  this.content = ''
					  this.editorStatus = false
					  this.$emit('refreshComment', this.type)
					  uni.showToast({
						title: '评论成功!',
						icon: 'success',
						duration: 2000
					  })
					} else if (code === 500) {
					  uni.showToast({
						title: '评论失败!',
						icon: 'error',
						duration: 2000
					  })
					}
				} else if (this.type === 'reply') {
					const { code } = await this.$axios.api.addReply({
					  tid: this.tid,
					  cid: this.cid,
					  content: this.content
					})
					if (code === 200) {
					  this.content = ''
					  this.editorStatus = false
					  this.$emit('refreshReply', this.type)
					  uni.showToast({
						title: '回复成功!',
						icon: 'success',
						duration: 2000
					  })
					} else if (code === 500) {
					  uni.showToast({
						title: '评论失败!',
						icon: 'error',
						duration: 2000
					  })
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	padding: 20rpx;
	box-sizing: border-box;
	&:last-child{
		padding-bottom: 80rpx;
	}
	.handed{
		color: red;
	}
	.title{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1rpx dotted #e7e7e7;
	}
	.commentList{
		.userInfo{
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.pic,.nickname,.vip,{
				margin-right: 10px;
			}
		}
		.content{
			min-height: 100rpx;
			font-size: 24rpx;
			padding-left:50px;
			box-sizing: border-box;
		}
		.replyList{
			padding-left: 50px;
			box-sizing: border-box;
			.replyItem{
				height: 100rpx;
				font-size: 24rpx;
				display:flex;
				flex-flow: wrap row;
				align-items: center;
				background-color: rgba(31, 182, 131,0.2);
				border-bottom: 1rpx dotted rgba(31, 182, 131,0.3) ;
				.replyContent{
					margin-right: 20rpx;
				}
			}
		}
		.other{
			height: 80rpx;
			padding-left: 50px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			text{
				font-size: 24rpx;
				margin-right: 20rpx;
			}
		}
	}
	.submitWrap{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom:0;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #f5f5f5;
		.editor{
			.btn{
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10px;
				box-sizing: border-box;
				.cancel,
				.submit {
				  width: 120rpx;
				  height: 60rpx;
				  line-height: 60rpx;
				  text-align: center;
				  color: #fff;
				  border-radius: 5px;
				  background-color: rgba(31, 182, 131, 0.8);
				  font-size: 24rpx;
				}
				.cancel {
				  background-color: rgba(145, 148, 147, 0.8);
				}
			}
		}
		.clickWrap{
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgb(133, 204, 180);
			.click{
				width: 80%;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #f3f3f3;
				font-size: 24rpx;
				color: #555;
				text-align: center;
				border-radius: 10rpx;
			}
		}
		
	}
}
</style>
